import { onMounted, provide, ref, watch } from 'vue';

import { useRouter } from 'vue-router';

// 导入解析城市名的方法
import { analysisCityName } from './analysisCityName';


// CC-- 导入pinia的两个方法
import { storeToRefs } from "pinia";
import {CStore} from '../../stores/counter'

// CC-- 解构出pinia中存储的数据
const $store = CStore()
// const {clickCity} = storeToRefs($store)

export const historyCityData = ()=>{
    const $router = useRouter()
    // 1.创建一个数组historyCity,用于保存历史记录
    let historyCity = ref([])

    //2.从浏览器会话存储中下载历史记录数据,完成对数组historyCity的初始化
    function initHistory() {
        const historyData = JSON.parse(localStorage.getItem("historyData"))
        // 判断是否存在历史记录数据
        if (historyData === null) {
            // 如果没有数据
            historyCity.value = [] 
        } else {
            // 如果有数据
            historyCity.value = historyData
        }
    }


    onMounted(() => {
        // 如果浏览器的会话存储中没有数据,则创建一下
        let data = JSON.parse(localStorage.getItem("currentCityData"))
        if(data===null) {
            localStorage.setItem("currentCityData", JSON.stringify([]));
        }
    })



    // 3.当城市按钮被点击时的回调函数
    function addCity(name) {
        // 判断被点击的城市是否在历史记录中
        const detector = historyCity.value.every(value => value != name)
        //如果历史记录中没有这个城市,将被点击的城市加入历史记录
        if(detector) {
            if(historyCity.value.length == 3) {
                historyCity.value.splice(0,1)
            }
            historyCity.value.push(name)
        }

        // 根据被点击城市的名称进行地名解析,获取城市数据并存储
        analysisCityName(name)
       
        // 跳转到首页
        $router.push('/home')
    }

    // 侦听历史记录的变化,将数据存储到pinia以及浏览器的会话存储中
    watch(historyCity,()=>{             
       localStorage.setItem("historyData", JSON.stringify(historyCity.value));    
       $store.$patch({
           clickCity: historyCity.value
       })
    },{deep:true})

    return {historyCity,addCity,initHistory}
}